<template>
  <div id="app">
    <vue-upload-imgs
        multiple
        compress
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-remove="beforeRemove"
        :limit="limit"
        :type="type"
        @preview="preview"
        @exceed="exceed"
        @oversize="oversize"
        v-model="files"
    >
      <div>只能上传3张图片</div>
    </vue-upload-imgs>
    <div class="preview-bg" v-show="isPreview">
      <div class="dialog">
        <button class="close-preview" @click="closePreview">关闭</button>
        <img :src="previewIMG" class="preview-img">
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      files: [
        {
          url: data.download_url,
          name: data.name
        },
      ],
      data: '',
      maxSize: 1024 * 10, // 10 KB
      previewIMG: null,
      limit: 3,
      isPreview: false,
      type: 2, // 0 预览模式 1 列表模式 2 预览模式 + 上传按钮
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (){
      axios.get(
          'https://gitee.com/api/v5/repos/gitlyl/liuyanliang/contents/img',
      ).then((res) => {
        this.data = res.data
        console.log(this.data)
        this.total = res.data.length
        // console.log(this.datalist.length)
      })
    },
    oversize(file) {
      console.log('oversize')
      console.log('filesize:' + file.size / 1024 + 'KB')
    },

    afterRead(file) {
      console.log('after-read')
      console.log(file)
    },

    beforeRemove(index, file) {
      console.log(index, file)
      return true
    },

    preview(index, file) {
      this.previewIMG = file.url
      this.isPreview = true
    },

    exceed() {
      alert(`只能上传${this.limit}张图片`)
    },

    beforeRead(files) {
      console.log('before-read')
      for (let i = 0, len = files.length; i < len; i++) {
        const file = files[i]
        if (file.type != 'image/jpeg' && file.type != 'image/png') {
          alert('只能上传jpg和png格式的图片')
          return false
        }
      }

      return true
    },

    closePreview() {
      this.isPreview = false
    }
  }
}



</script>


<style>
.preview-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
overflow: auto;
}
.dialog img {
display: block;
margin: auto;
margin-top: 10vh;
}
.close-preview {
position: fixed;
top: 2vh;
left: 10vw;
transform: translateX(-50%);
font-size: 20px;
}
</style>